<template>
  <el-dialog title="选择图标" v-model="show" width="900px" :append-to-body="true" :close-on-press-escape="true"
             :close-on-click-modal="true">
    <el-tabs v-model="iconTab" type="card">
      <el-tab-pane :label="item.label" :name="item.key" v-for="item in iconList" v-bind:key="item.key">
        <div class="iconList">
          <div class="iconList_span" v-for="icon in item.list" v-bind:key="icon" v-on:click="form[prop]=icon;close()">
            <i :class="icon"></i>
            <div class="iconList_span_label">{{ icon }}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  mixins: [],
  components: {},
  data() {
    return {
      show: false,
      iconTab: "elementUI",
      iconList: [
        {
          key: "elementUI",
          label: "ElementUI",
          list: [
            "el-icon-platform-eleme",
            "el-icon-eleme",
            "el-icon-delete-solid",
            "el-icon-delete",
            "el-icon-s-tools",
            "el-icon-setting",
            "el-icon-user-solid",
            "el-icon-user",
            "el-icon-phone",
            "el-icon-phone-outline",
            "el-icon-more",
            "el-icon-more-outline",
            "el-icon-star-on",
            "el-icon-star-off",
            "el-icon-s-goods",
            "el-icon-goods",
            "el-icon-warning",
            "el-icon-warning-outline",
            "el-icon-question",
            "el-icon-info",
            "el-icon-remove",
            "el-icon-circle-plus",
            "el-icon-success",
            "el-icon-error",
            "el-icon-zoom-in",
            "el-icon-zoom-out",
            "el-icon-remove-outline",
            "el-icon-circle-plus-outline",
            "el-icon-circle-check",
            "el-icon-circle-close",
            "el-icon-s-help",
            "el-icon-help",
            "el-icon-minus",
            "el-icon-plus",
            "el-icon-check",
            "el-icon-close",
            "el-icon-picture",
            "el-icon-picture-outline",
            "el-icon-picture-outline-round",
            "el-icon-upload",
            "el-icon-upload2",
            "el-icon-download",
            "el-icon-camera-solid",
            "el-icon-camera",
            "el-icon-video-camera-solid",
            "el-icon-video-camera",
            "el-icon-message-solid",
            "el-icon-bell",
            "el-icon-s-cooperation",
            "el-icon-s-order",
            "el-icon-s-platform",
            "el-icon-s-fold",
            "el-icon-s-unfold",
            "el-icon-s-operation",
            "el-icon-s-promotion",
            "el-icon-s-home",
            "el-icon-s-release",
            "el-icon-s-ticket",
            "el-icon-s-management",
            "el-icon-s-open",
            "el-icon-s-shop",
            "el-icon-s-marketing",
            "el-icon-s-flag",
            "el-icon-s-comment",
            "el-icon-s-finance",
            "el-icon-s-claim",
            "el-icon-s-custom",
            "el-icon-s-opportunity",
            "el-icon-s-data",
            "el-icon-s-check",
            "el-icon-s-grid",
            "el-icon-menu"
          ]
        },
        {
          key: "system",
          label: "系统图标",
          list: [
            "vbl vbl-quanxian",
            "vbl vbl-dict",
            "vbl vbl-peizhi",
            "vbl vbl-jigou01",
            "vbl vbl-canshu",
            "vbl vbl-yewuzidian",
            "vbl vbl-API",
            "vbl vbl-yemianpeizhi",
            "vbl vbl-profile",
            "vbl vbl-mima",
            "vbl vbl-tuichu",
            "vbl vbl-tuichuquanping",
            "vbl vbl-tubiaozhizuomoban-",
            "vbl vbl-yidong1",
            "vbl vbl-biaoge",
            "vbl vbl-wenjianjia1",
            "vbl vbl-wenjianjia",
            "vbl vbl-list",
            "vbl vbl-shanchu1",
            "vbl vbl-xiaoxi",
            "vbl vbl-daoru",
            "vbl vbl-daochu",
            "vbl vbl-system",
            "vbl vbl-jia2",
            "vbl vbl-chaxun"
          ]
        }
      ],
      form: null,
      prop: null
    }
  },
  props: {},
  setup() {
  },
  mounted() {
  },
  methods: {
    /**
     * 打开对话框
     */
    async open(form, prop) {
      this.show = true
      this.form = form
      this.prop = prop
    },
    /**
     * 关闭对话框
     */
    close() {
      this.show = false
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
:deep(.iconList) {
  width: 100%;
  display: flex;
  flex-flow: wrap row;
  border-left: 1px solid var(--border-bd);
  border-top: 1px solid var(--border-bd);

  .iconList_span {
    width: 16.666%;
    text-align: center;
    border-right: 1px solid var(--border-bd);
    border-bottom: 1px solid var(--border-bd);
    box-sizing: border-box;
    padding: 10px 0 20px 0;
    cursor: pointer;

    &:hover {
      background: var(--bg-page);
    }

    i {
      display: inline-block;
      width: 100%;
      height: 70px;
      line-height: 70px;
      font-size: 30px;
    }

    .iconList_span_label {
      font-size: 12px;
      color: var(--font-hc);
    }
  }
}
</style>
